import { useEffect } from "react";
import { history, useModel } from "umi";
import { useReactive } from "ahooks";
import { List, Card, Avatar, Image as AntdImage, Table, Tooltip, Modal, Space, Pagination, message, Popconfirm, Tag, Row, Col, Descriptions } from "antd";
import { Button, Card as SemiCard, Descriptions as SemiDescriptions, Input, ButtonGroup, Form } from "@douyinfe/semi-ui";
import { IconDelete, IconEyeOpened, IconPlusCircle, IconEdit, IconRefresh } from "@douyinfe/semi-icons";
import { format } from "timeago.js";

import useHelperOrder from "../helper/useHelperOrder";

const PaidOrdersPage = () => {
    const { windowInnerHeight, UTCTimeToLocal, numberFormat } = useModel("global");
    const { openSendoutGoodModal } = useHelperOrder();
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");
    const { memberInfo } = useModel("person.info");

    const state = useReactive({
        loading: false,
        page: 1,
        pageSize: 20,
        totalCount: 0,

        orders: [],
        selectedOrder: {},
    });

    const loadOrders = async () => {
        state.loading = true;

        state.loading = false;
    };

    const orderRefund = async () => {};

    useEffect(() => {
        memberInfo?.staff?.osUuid && loadOrders();
    }, [state.page, memberInfo]);

    const headerExtraContent = (
        <ButtonGroup>
            <Button>所有</Button>
            <Button>待支付</Button>
            <Button>待发货</Button>
            <Button>待收货</Button>
            <Button>已完结</Button>
        </ButtonGroup>
    );

    const semiCardFooter = (
        <div style={{ padding: "11px 0", textAlign: "center" }}>
            <Pagination
                total={state.totalCount}
                pageSize={state.pageSize}
                position={["none", "bottomCenter"]}
                hideOnSinglePage={false}
                showSizeChanger={false}
                onChange={(page) => (state.page = page)}
                itemRender={(_, type, originalElement) => {
                    if (type === "prev") return <a>上一页</a>;
                    if (type === "next") return <a>下一页</a>;
                    return originalElement;
                }}
            />
        </div>
    );

    const cardBodyHeight = windowInnerHeight - 90 - 54 - 20;

    return (
        <div style={{ padding: 10 }}>
            <Row gutter={10}>
                <Col span={7}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 15 }}> 订单列表 </span>}
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        size="default"
                        bodyStyle={{ padding: 0, height: cardBodyHeight - 54, overflow: "auto" }}
                        headerExtraContent={headerExtraContent}
                        footerStyle={{ padding: 0 }}
                        footerLine={true}
                        footer={semiCardFooter}
                    >
                        <List
                            loading={state.loading}
                            dataSource={[0, 1]}
                            style={{ height: cardBodyHeight - 60, overflow: "auto" }}
                            renderItem={(item) => (
                                <List.Item
                                    key={item.soUuid}
                                    className={`list-item ${state.selectedOrder?.appUuid === item?.appUuid ? "list-item-selected" : ""}`}
                                    style={{ border: "2px solid #eee" }}
                                    onClick={() => (state.selectedOrder = item)}
                                >
                                    <OrderItem order={item} />
                                </List.Item>
                            )}
                        />
                    </SemiCard>
                </Col>
                <Col span={17}>
                    <SemiCard
                        title={<span style={{ lineHeight: "32px", fontSize: 15 }}>订单详情</span>}
                        headerStyle={{ padding: "10px 14px" }}
                        shadows="always"
                        bordered={false}
                        size="default"
                        bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
                        headerExtraContent={
                            <ButtonGroup>
                                <Button onClick={() => openSendoutGoodModal({ reloadData: () => {} })}>发货</Button>
                                <Tooltip title={"如果已经发货无法更换"}>
                                    <Button>更换为门店自取</Button>
                                </Tooltip>
                            </ButtonGroup>
                        }
                    >
                        <Space direction="vertical" size={10} style={{ padding: 10, width: "100%" }}>
                            <OrderInfo />
                            <OrderCommodities />
                            <OrderServiceItems />
                            <OrderLogistics />
                            <OrderChargeBack />
                        </Space>
                    </SemiCard>
                </Col>
            </Row>
        </div>
    );
};

const OrderItem = ({ order }) => {
    const { UTCTimeToLocal } = useModel("global");

    return (
        <Space direction="vertical" style={{ padding: "0 20px", width: "100%" }}>
            <div className="flex-box" style={{ paddingBottom: 5, borderBottom: "1px solid #ddd" }}>
                <div style={{ fontWeight: 800 }}>{"订单编号：" + (order?.soNumb || "")}</div>
                <div>
                    <Tag color="blue">{order?.soStat} 订单状态</Tag> 订单类型（套餐，常规，会员）
                </div>
            </div>

            <SemiDescriptions row className="order-desc">
                <SemiDescriptions.Item itemKey="客户" style={{ width: 160 }}>
                    {"姓名"}
                </SemiDescriptions.Item>
                <SemiDescriptions.Item itemKey="金额">{helper.numberFormat(500000, 0)}</SemiDescriptions.Item>
                <SemiDescriptions.Item itemKey="商品数">{helper.numberFormat(1000, 0)}</SemiDescriptions.Item>
                <SemiDescriptions.Item itemKey="服务数">{helper.numberFormat(1000, 0)}</SemiDescriptions.Item>
            </SemiDescriptions>

            <div className="flex-box" style={{ paddingTop: 5, borderTop: "1px solid #ddd" }}>
                <div>
                    创建信息： {order?.crRsna} - {format(UTCTimeToLocal(order?.soCrti), "zh_CN")}
                </div>
                <div>支付信息： {order?.soTime ? format(UTCTimeToLocal(order?.soTime), "zh_CN") : "-"}</div>
            </div>
        </Space>
    );
};

const OrderInfo = ({ order }) => {
    const { UTCTimeToLocal } = useModel("global");

    return (
        <Card title="订单基本信息" size="small" bodyStyle={{ padding: "12px 40px" }} extra={order?.soNumb}>
            <Descriptions size="small" labelStyle={{ width: 100, textAlign: "right", display: "block" }}>
                <Descriptions.Item label="客户姓名">客户姓名{order?.cust?.ciName || "" + (order?.cust?.ciAlia ? "(" + order?.cust?.ciAlia + ")" : "")}</Descriptions.Item>
                <Descriptions.Item label="客户电话">客户电话 {order?.cust?.ciPhon || ""} </Descriptions.Item>
                <Descriptions.Item label="订单商品数量">{order?.commodities?.totalCount || 0}</Descriptions.Item>
                <Descriptions.Item label="订单总金额">{helper.numberFormat(order?.soPric, 2) || 0}</Descriptions.Item>
                <Descriptions.Item label="订单优惠金额">{helper.numberFormat(order?.soPric, 2) || 0}</Descriptions.Item>
                <Descriptions.Item label="订单成交金额">{helper.numberFormat(order?.soPric, 2) || 0}</Descriptions.Item>
                <Descriptions.Item label="取货方式">门店自取</Descriptions.Item>
                <Descriptions.Item label="取货码">5462131</Descriptions.Item>
                <Descriptions.Item label="创建时间">{UTCTimeToLocal(order?.soCrti) || ""}</Descriptions.Item>
                <Descriptions.Item label="分享客户">{order?.sharecust?.ciName || "" + (order?.sharecust?.ciPhon ? "-" + order?.sharecust?.ciPhon : "")}</Descriptions.Item>
                <Descriptions.Item label="所属员工">{order?.staff?.orName || "" + (order?.staff?.orPhon ? "-" + order?.staff?.orPhon : "")}</Descriptions.Item>
            </Descriptions>
        </Card>
    );
};

const OrderCommodities = ({ order }) => {
    const { imageBase64 } = useModel("global");

    return (
        <Card
            title="商品清单"
            size="small"
            bordered
            bodyStyle={{ padding: 0 }}
            headStyle={{}}
            // extra={
            //     <ButtonGroup>
            //         <Button>退货处理</Button>
            //     </ButtonGroup>
            // }
        >
            <Table bordered={false} size="small" dataSource={[1]} rowKey="ciUuid" pagination={false} style={{ marginTop: 1 }}>
                <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                <Table.Column title="商品全称" dataIndex="ciName" key="ciName" align="left" render={(_, r) => r.info?.ciName || ""} />
                <Table.Column title="商品数量" dataIndex="ciQuat" key="ciQuat" align="center" render={(_) => (_ ? numberFormat(_, 2) : 0)} />
                <Table.Column title="商品单价" dataIndex="ciMava" key="ciMava" align="right" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="商品总价" dataIndex="ciMava" key="ciMava" align="right" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="优惠金额" dataIndex="ciMava" key="ciMava" align="right" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="商品结算价" dataIndex="ciSepr" key="ciSepr" align="right" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="已发货数量" dataIndex="ciQuat" key="ciQuat" align="center" render={(_) => (_ ? numberFormat(_, 2) : 0)} />
                <Table.Column title="未发货数量" dataIndex="ciQuat" key="ciQuat" align="center" render={(_) => (_ ? numberFormat(_, 2) : 0)} />
            </Table>
        </Card>
    );
};

const OrderServiceItems = ({ order }) => {
    const { imageBase64 } = useModel("global");
    return (
        <Card title="服务清单" size="small" bordered bodyStyle={{ padding: 0 }}>
            <Table bordered={false} size="small" dataSource={[1]} rowKey="ciUuid" pagination={false} style={{ marginTop: 1 }}>
                <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                <Table.Column title="服务项目" dataIndex="ciName" key="ciName" align="left" render={(_, r) => r.info?.ciName || ""} />
                <Table.Column title="服务计量" dataIndex="ciQuat" key="ciQuat" align="center" render={(_) => (_ ? numberFormat(_, 2) : 0)} />
                <Table.Column title="服务单价" dataIndex="ciQuat" key="ciQuat" align="right" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="服务总价" dataIndex="ciMava" key="ciMava" align="right" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="优惠金额" dataIndex="ciQuat" key="ciQuat" align="right" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="服务结算价" dataIndex="ciSepr" key="ciSepr" align="right" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
            </Table>
        </Card>
    );
};

const OrderLogistics = ({ order }) => {
    const { imageBase64 } = useModel("global");
    const { openSendoutGoodModal } = useHelperOrder();

    return (
        <Card
            title="物流信息"
            size="small"
            bordered
            bodyStyle={{ padding: 0 }}
            extra={
                <ButtonGroup>
                    <Button onClick={() => openSendoutGoodModal({ reloadData: () => {} })}>添加物流信息</Button>
                </ButtonGroup>
            }
        >
            <Table bordered={false} size="small" dataSource={[0]} rowKey="ciUuid" pagination={false}>
                <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                <Table.Column title="物流单号" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="快递公司名称" dataIndex="ciQuat" key="ciQuat" align="center" />
                <Table.Column
                    title="包裹详情"
                    dataIndex="ciMava"
                    key="ciMava"
                    align="center"
                    render={(_, r) => (
                        <Tooltip
                            color="white"
                            title={
                                <div style={{ width: 400 }}>
                                    <Table bordered={false} size="small" dataSource={[1]} rowKey="ciUuid" pagination={false} style={{ marginTop: 1 }}>
                                        <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                                        <Table.Column title="商品全称" dataIndex="ciName" key="ciName" align="left" width={120} render={(_, r) => r.info?.ciName || ""} />
                                        <Table.Column title="商品数量" dataIndex="ciQuat" key="ciQuat" align="center" width={80} render={(_) => (_ ? numberFormat(_, 2) : 0)} />
                                    </Table>
                                </div>
                            }
                        >
                            <IconEyeOpened />
                        </Tooltip>
                    )}
                />
                <Table.Column title="发货人" dataIndex="ciSepr" key="ciSepr" align="center" />
                <Table.Column title="发货日期" dataIndex="ciSepr" key="ciSepr" align="center" />

                <Table.Column
                    title="操作"
                    dataIndex="ciQuat"
                    key="ciQuat"
                    align="center"
                    width={90}
                    render={(_) => (
                        <ButtonGroup>
                            <Button icon={<IconEdit />}></Button>
                            <Button icon={<IconDelete />}></Button>
                        </ButtonGroup>
                    )}
                />
            </Table>
        </Card>
    );
};

const OrderChargeBack = ({ order }) => {
    const { imageBase64 } = useModel("global");
    return (
        <Card title="退单信息" size="small" bordered bodyStyle={{ padding: 0 }}>
            <Table bordered={false} size="small" dataSource={[0]} rowKey="ciUuid" pagination={false}>
                <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                <Table.Column title="退单编号" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column
                    title="退单商品详情"
                    dataIndex="ciName"
                    key="ciName"
                    align="left"
                    render={(_, r) => (
                        <Tooltip
                            color="white"
                            title={
                                <div style={{ width: 500 }}>
                                    <Table bordered={false} size="small" dataSource={[1]} rowKey="ciUuid" pagination={false} style={{ marginTop: 1 }}>
                                        <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                                        <Table.Column
                                            title="商品图片"
                                            dataIndex="ciPict"
                                            key="ciName"
                                            align="left"
                                            width={80}
                                            render={(_, r) => <AntdImage preview width={60} height={60} src={imageBase64} fallback={imageBase64} />}
                                        />
                                        <Table.Column title="商品全称" dataIndex="ciName" key="ciName" align="left" width={120} render={(_, r) => r.info?.ciName || ""} />
                                        <Table.Column title="商品数量" dataIndex="ciQuat" key="ciQuat" align="center" width={80} render={(_) => (_ ? numberFormat(_, 2) : 0)} />
                                        <Table.Column title="商品金额" dataIndex="ciQuat" key="ciQuat" align="center" width={80} render={(_) => (_ ? numberFormat(_, 2) : 0)} />
                                    </Table>
                                </div>
                            }
                        >
                            {" "}
                            <IconEyeOpened />
                        </Tooltip>
                    )}
                />
                <Table.Column
                    title="退单服务详情"
                    dataIndex="ciName"
                    key="ciName"
                    align="left"
                    render={(_, r) => (
                        <Tooltip
                            color="white"
                            title={
                                <div style={{ width: 500 }}>
                                    <Table bordered={false} size="small" dataSource={[1]} rowKey="ciUuid" pagination={false} style={{ marginTop: 1 }}>
                                        <Table.Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                                        <Table.Column
                                            title="服务图片"
                                            dataIndex="ciPict"
                                            key="ciName"
                                            align="left"
                                            width={80}
                                            render={(_, r) => <AntdImage preview width={60} height={60} src={imageBase64} fallback={imageBase64} />}
                                        />
                                        <Table.Column title="服务项目" dataIndex="ciName" key="ciName" align="left" width={120} render={(_, r) => r.info?.ciName || ""} />
                                        <Table.Column title="项目数量" dataIndex="ciQuat" key="ciQuat" align="center" width={80} render={(_) => (_ ? numberFormat(_, 2) : 0)} />
                                        <Table.Column title="项目价格" dataIndex="ciQuat" key="ciQuat" align="center" width={80} render={(_) => (_ ? numberFormat(_, 2) : 0)} />
                                    </Table>
                                </div>
                            }
                        >
                            {" "}
                            <IconEyeOpened />
                        </Tooltip>
                    )}
                />

                <Table.Column title="退单金额" dataIndex="ciMava" key="ciMava" align="center" />
                <Table.Column title="退单日期" dataIndex="ciSepr" key="ciSepr" align="center" />
                <Table.Column title="退单状态" dataIndex="ciSepr" key="ciSepr" align="center" />
                <Table.Column
                    title="操作"
                    dataIndex="ciSepr"
                    key="ciSepr"
                    align="center"
                    width={60}
                    render={(_) => (
                        <ButtonGroup>
                            <Button>确认</Button>
                        </ButtonGroup>
                    )}
                />
            </Table>
        </Card>
    );
};

export default PaidOrdersPage;
